@use '../core' as *;

.topBar {
    background-color: var(--color-bg-toolbar);

    #{$selector-darkmode} & {
        border-bottom: 1px solid var(--color-border-primary);
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        position: sticky;
        top: var(--layout-site-header-height);
        z-index: 3;
    }

    #{$selector-darkmode} & {
        background: var(--color-bg-primary);
        border-bottom: 0.5px solid var(--color-border-primary);
    }
}

.topBarInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 58px;
    padding-top: $spacing-size-2;
    padding-bottom: $spacing-size-2;

    nav ul {
        display: flex;
        gap: $spacing-size-8;
    }

    nav li {
        position: relative;

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            left: 0;
            bottom: -2px;
            border-radius: 1px;
            background-color: var(--color-link);
            opacity: 0;
            transform: scaleX(0);
            transition:
                transform 0.33s ease-in-out,
                opacity 0.33s ease-in-out;
        }

        &:hover::before {
            opacity: 0.4;
            transform: scaleX(1);
        }

        &.active::before {
            opacity: 1;
            transform: scaleX(1);
        }
    }

    nav a {
        display: block;
        font-weight: 500;

        #{$selector-darkmode} & {
            color: var(--color-fg-primary);
        }

        &:hover {
            color: var(--color-link);
        }
    }
}
